import { getRewardLog } from "@api";
import BackgroundImg from "@assets/bg05.jpg";
import ClickGet from "@assets/click_get.png";
import CustomizedRmk from "@assets/customized_rmk.png";
import GoButton from "@assets/go_button.png";
import BaseBackground from "@plugin/BaseBackground";
import EnhanceUseNavigate from "@plugin/EnhanceUseNavigate";
import React, { Component } from "react";
import styles from "./index.module.scss";

import IQIYI from "@assets/iqiyi_award_text.png";
import KS from "@assets/ks_award_text.png";
import RP from "@assets/red_package_award_text.png";
import TPP from "@assets/tpp_award_text.png";
import TZL from "@assets/tzl_award_text.png";
import { getChannel, navigateToMiniHome } from "../../../utils";
import { CampaignIds } from "../../../utils/ha.common";

class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      rewards: [],
    };
  }

  componentDidMount() {
    getRewardLog().then((res) => {
      if (res["state"] === "ok") {
        this.setState({ rewards: res.data });
      }
    });

    window._ha("send", "action", "cny_activity2_mygiftpage_view", {
      campaign_id: CampaignIds.activity2,
      channel: getChannel(),
    });
  }
  // 立即领取
  handlerGet = async (item) => {
    //针对红包封面直接跳转
    if (item.lottery_result === 5 && item.prize_url) {
      window.location.href = item.prize_url;
      return;
    }

    this.props.navigate(
      `/activity_result_2?lottery_result=${item["lottery_result"]}&reward_id=${item["id"]}`
    );

    const PrizeTypes = {
      5: "hongbao",
      4: "iqiyi",
      3: "taopiaopiao",
      2: "kaishu",
      1: "tianzhenlan",
    };

    if (!PrizeTypes[item.lottery_result]) return;
    window._ha("send", "action", "cny_activity2_mygiftpage_gotoreceive_click", {
      campaign_id: CampaignIds.activity2,
      channel: getChannel(),
      gift_type: PrizeTypes[item.lottery_result],
    });
  };

  render() {
    const { rewards } = this.state;
    return (
      <BaseBackground backgroundImage={BackgroundImg} showFlag={true}>
        <div>
          <div className={styles.award_box}>
            {rewards.length > 0 ? (
              <div className={styles.award_list}>
                {rewards.map((item) => (
                  <div key={item.id}>
                    <div className={styles.award_item}>
                      {/* <span>{item["prize_name"]}</span> */}
                      {item["lottery_result"] === 1 && (
                        <img className={styles.tzl} src={TZL} alt="" />
                      )}
                      {item["lottery_result"] === 2 && (
                        <img className={styles.ks} src={KS} alt="" />
                      )}
                      {item["lottery_result"] === 3 && (
                        <img className={styles.tpp} src={TPP} alt="" />
                      )}
                      {item["lottery_result"] === 4 && (
                        <img className={styles.iqiyi} src={IQIYI} alt="" />
                      )}
                      {item["lottery_result"] === 5 && (
                        <img className={styles.rp} src={RP} alt="" />
                      )}
                      <div>
                        <img
                          onClick={() => this.handlerGet(item)}
                          className={styles.click_get}
                          src={ClickGet}
                          alt=""
                        />
                      </div>
                    </div>
                    <div className={styles.award_item_line}></div>
                  </div>
                ))}
              </div>
            ) : (
              <div className={styles.award_empty}>暂无奖品</div>
            )}
          </div>
          <img src={CustomizedRmk} className={styles.customized_rmk} alt="" />
          <img
            onClick={() => {
              navigateToMiniHome(
                "/pages/userPackage/FY2324CNYBeSpoke?scene=luckydraw",
                () => {
                  this.props.navigate("/");
                }
              );

              window._ha(
                "send",
                "action",
                "cny_activity2_mygiftpage_gotovideo_click",
                {
                  campaign_id: CampaignIds.activity2,
                  channel: getChannel(),
                }
              );
            }}
            src={GoButton}
            className={styles.go_button}
            alt=""
          />
        </div>
      </BaseBackground>
    );
  }
}

export default EnhanceUseNavigate(Index);
